<template>
	<view class="page-body">
		<scroll-view class="nav-top" scroll-x="true" :scroll-left="'width:'+width+'px'">
			<view class="nav-top-item">
				<view @click="orderStatusClickMain(orderTab,index)" v-for="(item,index) in ordertatusList" :key="index" :class="index==orderStatusActive?'active':''">{{item.NAME}}</view><!-- ?'orderStatusActive':'' -->
			</view>
		</scroll-view>
		<view  class="orderInfo"  v-for="(item,index) in ordersListData" :key="index" v-if="item.goods.length > 0" @click="goOrderDetails(index)"><!-- v-show="index==orderStatusActive" //v-if="item.goods.length > 0" -->
			<!-- <view  v-for="(its,index) in s.list" :key="index"> sss
				{{its.id}}
			</view> -->
			<view class="orderInfo_row" >
				 <view class="">订单序列号：{{item.orderNo}}</view>
				 <view class="order_status " v-text="isOrderStatus(item.orderStatus)[0]"></view>
			</view>
			<view class="orderInfo_middle"  v-for="gitem in item.goods" :key="gitem.id" >
				<view class="orderInfo_left"> 
					<image :src="gitem.goodImg" class="order_img" mode="aspectFit" ></image>
				</view>
				<view class="orderInfo_right">
				   <view class="order_right_row">
					  <text class="leftfloat">{{gitem.goodName}}</text>
					  <text class="rightfloat">{{gitem.sellingPrice}}</text>
				   </view>
				   
				   <view class="order_right_row">
					  <text class="leftfloat">{{gitem.num}}</text>
					  <text class="order_count rightfloat">{{item.goods.length}}</text>
				   </view>
				   <view>
					 <text class="order_text1">{{gitem.num}}</text>
				   </view>
				</view>
			</view>
			<!-- <load-more  :state="loadingState" @pull-up="_pullup"></load-more> -->
			<view class="btnView">
			  <view class="btnLeft" v-show="isOrderStatus(item.orderStatus)[2]" v-text="isOrderStatus(item.orderStatus)[2]"></view>
			  <view class="btnRight" v-text="isOrderStatus(item.orderStatus)[1]" @click.stop="goPay(index)"></view>
			</view>
			
		</view>
			
			<!-- 取消订单弹窗 -->
			<view class="cancelOrder">
				<popupCancel :show="type === 'cancel'" position="bottom" mode="fixed"  @hidePopup="canceltogglePopup('')"></popupCancel>
			</view>
			<!-- 删除订单弹窗 -->
			<view class="deleteOrder">
				<popupDelete :show="type === 'delete'" position="middle" mode="fixed"  @hidePopup="deletetogglePopup('')"></popupDelete>
			</view>
			<!-- 提醒发货弹窗 -->
			<view class="shipmentsOrder">
				<popupShipments :show="type === 'shipments'" position="middle" mode="fixed"  @hidePopup="shipmentstogglePopup('')"></popupShipments>
			</view>
			<!-- 退货原因弹窗 -->
			<view class="goods_return">
				<popupGoods :show="type === 'goods'" position="bottom" mode="fixed"  @hidePopup="goodstogglePopup('')"></popupGoods>
			</view>
			<!-- 退款原因弹窗 -->
			<view class="money_return">
				<popupMoney :show="type === 'money'" position="bottom" mode="fixed"  @hidePopup="moneytogglePopup('')"></popupMoney>
			</view>
		</view>
	</view>
</template>

<script>
	import popupCancel from '@/components/uni-popupCancel/uni-popupCancel.vue'
	import popupDelete from '@/components/uni-popupDelete/uni-popupDelete.vue'
	import popupShipments from '@/components/uni-popupShipments/uni-popupShipments.vue'
	import popupGoods from '@/components/uni-popupGoods/uni-popupGoods.vue'
	import popupMoney from '@/components/uni-popupMoney/uni-popupMoney.vue'
	// import loadMore from '@/components/load-more.vue' 
	// import backTop from '@/components/backTop.vue'

	export default {
		components: {
			popupCancel,
			popupDelete,
			popupShipments,
			popupGoods,
			popupMoney, 
			// loadMore,
			// backTop 
		},
		data() {
			return {
				ordertatusList: [
					{"NAME":"全部订单"},
					{"NAME":"待支付"},
					{"NAME":"待发货"},
					{"NAME":"待收货"},
					{"NAME":"售后"},
				],
					//,{"NAME":"待评价"},{"NAME":"已完成"}
				ordersListData: [],
				statusArr:['','obligation','shipments','receiving','afterSale'],
				s:[{
					list: this.ordersListData,		
					}
				],
				strArr:[
					["待支付","支付","取消订单"],
					["待收货","提醒发货","申请退款"],
					["待收货","确认收货","订单追踪"],
					["已完成","申请退货","删除"],
					["退货成功","查看详情"],
					["退款成功","查看详情"],
					["交易完成","查看详情"],
					["交易关闭","查看详情"]
				],
				height: 0,
				width: 0,
				orderStatusActive: 0,
				scrollTop: 0,
				scrollHeight: 0,
				type: '',
				oStatus: '',
			}
		},
		onLoad(){
			console.log(this.orderStatusActive);
			if(this.orderStatusActive == '0'){
				//this.oStatus = this.statusArr[0];
				this.getOrderListData(this.oStatus);
			}
			setTimeout(function () {
            console.log('start pulldown');
			}, 1000);
			uni.startPullDownRefresh();
			
			//this.getOrderListData();
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			goOrderDetails(index){
				console.log(this.ordersListData[index]);
				uni.navigateTo({
					url: '../orderDetails/orderDetails?orderInfo='+JSON.stringify(this.ordersListData[index])+'&orderStatus='+this.isOrderStatus(this.ordersListData[index].orderStatus)[0]
				})
			},
			orderStatusClickMain(orderTab,index) {
				let that = this;
				this.orderStatusActive = index;
				// if(this.orderStatusActive == 1){
				// 	this.$store.oStatus = 'shipments';// (this.oStatus = 'shipments') ;
				// 	uni.navigateTo({
				// 		url: "../myOrders/myOrders"
				// 	})
				// }
				console.log(this.orderStatusActive);
			},
			goPay(index){
				console.log(this.ordersListData);
				console.log(this.ordersListData[index].orderStatus);
				var statusStr = this.ordersListData[index].orderStatus;
				if(statusStr == 'obligation'){
					// uni.navigateTo({
					// 	url: '../openShop/ShopLogin/ShopLogin',
					// });
				}
				if(statusStr == 'afterSale'){
					 uni.navigateTo({
					 	url: '../openShop/ShopLogin/ShopLogin',
					 });
				}
			},
			//获取订单列表
			getOrderListData(oStatus){
				let that = this;
				uni.request({
					url: this.$store.state.URL + 'user/user/user_order',
					data:{
						token: '8cw7N6EIrQV9JaXZtMHT',//this.$store.state.token,
						orderStatus: oStatus,//statusArr[index],//this.oStatus,//'afterSale' 
						page: 1,
						pagesize: 4,
					},
					success(res) {
						that.ordersListData = res.data.data.order.data;
						// that.s[0] = that.ordersListData;
						// that.s[1] = that.ordersListData;
						console.log(that.ordersListData);
						// console.log(res.data.data);
						// console.log(res.data.data.order);
						// console.log(res.data.data.order.data);
					},
					fail() {
						console.log("null data");
					}
				})
			},
			// 弹窗
			//start
			canceltogglePopup(type) {  //取消订单弹窗
				this.type = type;
			},
			deletetogglePopup(type) {  //删除订单弹窗
				this.type = type;
			},
			shipmentstogglePopup(type) { //提醒发货弹窗
				this.type = type;
			},
			goodstogglePopup(type) { //退货原因弹窗
				this.type = type;
			},
			moneytogglePopup(type) { //退款原因弹窗
				this.type = type;
			},
			onBackPress() {
				if (this.type !== '') {
					this.type = '';
					return true;
				}
			},
			// 订单状态（obligation-待支付；shipments-待发货；receiving-待收货；afterSale-售后；returnSuccess-退货成功；refundSuccess-退款成功；success-交易完成；cancel-交易关闭；）
			isOrderStatus(ordersStatus){
				if(ordersStatus=='obligation'){	
					return this.strArr[0];
				}else if(ordersStatus=='shipments'){
					//var arr = this.strArr[1];
					return this.strArr[1];
				}
				else if(ordersStatus=='receiving'){
					return this.strArr[2];
				}
				else if(ordersStatus=='afterSale'){
					return this.strArr[3];
				}
				// else if(ordersStatus=='returnSuccess'){
				// 	return this.strArr[4];
				// }
				// else if(ordersStatus=='refundSuccess'){
				// 	//return '退款成功';
				// 	return this.strArr[5];
				// }
				// else if(ordersStatus=='success'){
				// 	return this.strArr[6];
				// }
				// else if(ordersStatus=='cancel'){
				// 	return this.strArr[7];
				// }else{
				// 	return '状态不存在';
				// }
			}
			// end
		}
	}
</script>

<style>
.page-body{
	color: #B7B7B7;
	background: #F3F3F3;
	height: auto;
}
.leftfloat{
	float: left;
}
.rightfloat{
	float: right;
}
.clean{
	clear: both;
}
.nav-top{
	white-space: nowrap;
	text-align: center;
	border-bottom: 1upx #e8e8e8 solid;
	background:#FFFFFF;
	color:#8d8d8d;
}
.nav-top-item{
    display: flex;
}
.nav-top-item view{
    font-size:30upx;
    padding: 10upx 0;
    margin:0 30upx;
}
.active{
	border-bottom: 2upx solid #F2526F;  
	color: #F2526F;
	border-bottom-width: 5upx;
}
.orderInfo{
	height: auto;
    background: #FFFFFF;
	margin-bottom: 20upx;
}
.orderInfo_row{
	width: 96%;
	height: 60upx;
	line-height: 60upx;
	display: flex;
	justify-content: space-between;
	font-size: 24upx;
	color: #999999;
	margin: 0 2%;
}
.order_status{
	color: #F2526F;
}
.orderInfo_middle{
	display: flex;
	justify-content: flex-start;
}
.orderInfo_left image{
	width: 180upx;
	height: 120upx;
	margin: 10upx 10upx 10upx 20upx;
}
.orderInfo_right{
	width: 68%;
	height: 140upx;
	margin: 0 2%;
	font-size: 30upx;
	color: #333333;
}
.order_right_row{
	display: flex;
	justify-content: space-between;
}
.order_text1{
	color: #B7B7B7;
	font-size: 24upx;
}
.btnView{
	display: flex;
	justify-content: flex-end;
	text-align: center;
	font-size: 24upx;
	background: #FFFFFF;
	border-top: 2upx #e0e0e0 solid;
	padding: 20upx 0;
}
.btnLeft{
  border: 1px solid ;
  border-radius: 20upx;
  width: 120upx;
}
.btnRight{
  border: 1px #F2526F solid ;
  border-radius: 20upx;
  color: #F2526F;
  margin: 0 20upx;
  width: 120upx;
}

</style>
